<template>
  <div>
    <el-form-item label="频道" prop="channelId">
      <!-- item 是数组中的每个对象 然后里面有name 是显示的文字 id
      change事件是  选中值发生变化时触发   返回值: 目前的选中值
      label 选项的标签，若不设置则默认与 value 相同  当前下拉框的内容
      el-select上的value用来指定当前下来列表中的哪一项处于选中状态
      value:决定下拉框中每个选项对应的value ---当选中这一项后 el-select中的value就是这个值

      v-for中的key有什么用? :v-for是用来做循环的,用key来标记被循环的项之间的区别,
      这个标记在页面更新时能加快处理的速度,在vue-cli创建的项目,你必须写key,否则会不通过,key的值一般是独一无二
      的值(就像id一样), 它会取index,取当前被循环对象的id
      -->
      <el-select placeholder="请选择频道"
      @change="hChange"
      :value='value'>
        <el-option
        v-for="item in channels"
        :key="item.id"
        :label="item.name"
        :value="item.id"></el-option>
      </el-select>
    </el-form-item>
  </div>
</template>

<script>

export default {
  name: 'channel',
  // 父组件传的值 value是固定的名字
  props: ['value'],
  data () {
    return {
      // 所有的数据是一个数组
      channels: []
    }
  },
  // 生命周期  处于loading结束后，还做一些初始化，实现函数自执行（data数据已经初始化，但是DOM结构渲染完成，组件没有加载
  created () {
    // 一开始就调用了请求数据
    this.loadChannels()
  },
  methods: {
    hChange (val) {
      // console.log(val)
      //  input 是固定的名字
      // 触发父组件的事件  去更新父组件v-model绑定的值
      this.$emit('input', val)
    },
    // 请求数据
    async loadChannels () {
      const res = await this.$axios({
        method: 'GET',
        url: '/mp/v1_0/channels'
      })
      // console.log(res)
      this.channels = res.data.data.channels
      // console.log(this.channels)
    }
  }
}
</script>
